<template>
	<el-row id="login">
		<el-row class="login-logo">
			<img src="../../images/loginLogo.png" /> 
		</el-row>
		<el-row class="title">工艺百科合伙人管理系统</el-row>
		<el-form :model="loginForm" ref="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-container">
		    <el-row class="err-msg">{{errMsg}}</el-row>
		    <el-form-item prop="account">
		      <el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="账号"></el-input>
		    </el-form-item>
		    <el-form-item prop="password">
		      <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
		    </el-form-item>
		     <el-checkbox class="remember" v-model="rembAccount" @click.native.prevent="fnRembAccount">记住账号</el-checkbox>
		    <el-form-item class="max-width">
		      <el-button type="primary" class="max-width btn-font" @click.native.prevent="fnBtnLogin" :loading="logining">登录</el-button>
		    </el-form-item>
		</el-form>
	</el-row>
</template>

<script>
    import Svc from '../service/index.js'
    import { mapActions, mapGetters } from 'vuex'  
	export default {
	    data() {
	      return {
	        logining: false,
	        loginForm: {
	          account: '',
	          password: '' //Pi5icc
	        },
	        loginRules: {
	          account: [
	            { required: true, message: '请输入账号', trigger: 'blur' }
	          ],
	          password: [
	            { required: true, message: '请输入密码', trigger: 'blur' }
	          ]
	        },
	        checked: true,
	        errMsg :'',
	        //记住账号
	        rembAccount : true
	      }
	    },
        computed: {  
	      ...mapGetters([  
	        'menuitems'
	      ])  
	    }, 
		methods: {
			//记住密码
			fnRembAccount : function(){
				this.rembAccount = !this.rembAccount
			},
			//登录
		    fnBtnLogin : function(){
		    	var that = this
		        that.$refs.loginForm.validate((valid) => {
		          if (valid) {
		            that.logining = true;
		            var loginParams = { Account: that.loginForm.account, Password: that.loginForm.password };
		            //请求登录操作
		            Svc.fnPostData('/api/login', loginParams,function(res){
		            	if (res.body.ErrCode == 0){
		            		//记住账号
		            		if (that.rembAccount) {
		            			localStorage.setItem('rembAccount',that.loginForm.account);
		            		} else {
		            			localStorage.setItem('rembAccount','');
		            		}
		            		//登录成功后跳转并保存用户信息
		            		sessionStorage.setItem('user', JSON.stringify(res.body.Data));
		                	//获取菜单信息
		                	that.fnGetMenus()
		                	that.$router.push({ path: '/manufacture' });
		            	} else {
		            		that.errMsg = res.body.ErrMsg
		            		that.logining = false;
		            	}
		            },function(res){
		            	that.errMsg = "网络错误，请重新！"
		            })
		          } else {
		          	that.errMsg = "账号及密码必须填写！"
		            return false;
		          }
		        });
		    },
		    //获取菜单操作
		    fnGetMenus : function(){
		    	var that = this
	            //获取菜单操作
	            Svc.fnGetData('/api/account/menus',{},function(res){
	            	if (res.body.ErrCode == 0){
	            		//保存菜单信息
	            		sessionStorage.setItem('menus', JSON.stringify(res.body.Data));
	            		that.addMenu(res.body.Data)
	            		that.$router.addRoutes(that.menuitems)
	            	} else {
	            		that.errMsg = res.body.ErrMsg
	            	}
	            },function(res){
	            	that.errMsg = "网络错误，请重新！"
	            })
		    },
		    ...mapActions([  
		        'addMenu'  
		    ])
	    },
		mounted() {
			//记住密码是否勾选
			var account = localStorage.getItem('rembAccount')
			if (account) {
				this.rembAccount = true
				this.loginForm.account = account
			} else {
				this.rembAccount = false
			}
		}
	}

</script>

<style scoped>
	#login{
		width: 100%;
		height: 100%;
		display: flex;
	  	flex-direction:column;
	  	justify-content: center;
	  	align-items: center;
		background: url(../../images/loginBg.jpg) no-repeat;
		background-size:100% 100%;
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../images/loginBg.jpg',sizingMethod='scale');
	}
	
	.login-logo{
		text-align: center;
	}
	
	.login-logo img{
		width: 62%;
		height: 100%;
		margin-bottom: 20px;
	}
	
    .title {
  		width: 310px;
  		height: 50px;
  		line-height: 50px;
  		font-size: 19px;
  		font-weight: bold;
  		font-family: Microsoft YaHei;
  		background: #20a0ff;
        text-align: center;
        color:#FFFFFF;
        -webkit-border-radius: 10px 10px 0 0;
	    border-radius: 10px 10px 0 0;
	    -moz-border-radius: 10px 10px 0 0;
	}

  .login-container {
	    -webkit-border-radius: 0 0 10px 10px;
	    border-radius: 0 0 10px 10px;
	    -moz-border-radius: 0 0 10px 10px;
	    width: 240px;
	    padding: 40px 35px 15px 35px;
	    background: #fff;
	    background-color:rgba(255,255,255,0.6);
	    box-shadow: 0 0 25px #cac6c6;
    }

    .login-container .remember {
        margin: 0px 0px 25px 0px;
    }
  
	.max-width{
  	    width: 100%;
	}
	  
	.btn-font{
	  	font-size: 15px;
	  	font-family: Microsoft YaHei;
	    letter-spacing: 5px;
	}
	
	.err-msg{
		font-size: 13px;
	    color: red;
	    text-align: center;
	    padding-bottom: 10px;
	    letter-spacing: 1px;
	}
</style>